<template>
  <div>
    <div class="header">
      <span>搜索用户</span>
      <svg
        t="1650882802913"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1929"
        width="16"
        height="16"
      >
        <path
          d="M950.381817 509.759983c0-242.11834-196.265012-438.384375-438.382329-438.384375-242.11834 0-438.382329 196.266036-438.382329 438.384375 0 242.12755 196.263989 438.392562 438.382329 438.392562 99.394754 0 190.403514-33.816177 263.941368-89.542362 3.0208-3.427052 5.004991-7.79964 5.004991-12.716626 0-10.729365-8.701173-19.431561-19.431561-19.431561-5.570879 0-10.529821 2.209318-14.068414 5.950526l-0.248663 0c-65.804728 48.423873-146.803507 77.415161-234.767931 77.415161-219.23619 0-396.992663-177.780009-396.992663-397.002896 0-219.260749 177.756473-396.99471 396.992663-396.99471 219.258703 0 396.99164 177.73396 396.99164 396.99471 0 66.952878-15.712867 129.98547-45.01831 185.352475l0 0.326435c-0.541329 1.849114-1.127683 3.65218-1.127683 5.636371 0 10.731412 8.701173 19.431561 19.431561 19.431561 8.363482 0 15.35164-5.363148 18.080797-12.759605l0 0.135076C932.008354 650.610918 950.381817 582.350255 950.381817 509.759983zM539.389302 397.050991c0-12.668531-10.32516-22.981411-23.038716-22.981411-12.670577 0-22.973224 10.31288-22.973224 22.981411l0 328.054571c0 12.670577 10.302647 22.994714 22.995737 22.994714 12.713556 0 23.016203-10.324136 23.016203-22.994714 0-0.044002-0.044002-0.091074-0.044002-0.134053L539.3453 397.209604C539.3453 397.164578 539.389302 397.098064 539.389302 397.050991zM516.395612 276.43082c-12.895705 0-23.333428 10.392698-23.333428 23.299659 0 12.875239 10.437723 23.310915 23.333428 23.310915 12.849656 0 23.309892-10.4367 23.309892-23.310915C539.705504 286.823518 529.244244 276.43082 516.395612 276.43082z"
          p-id="1930"
          fill="#515151"
        ></path>
      </svg>
    </div>
    <div class="center">
      <span>
        3333
        <svg
          t="1650883911102"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="14218"
          width="16"
          height="16"
        >
          <path
            d="M512 225.28c22.528 0 41.984 12.288 53.248 29.696l0 0 266.24 449.536c0 0 0 0 0 0l0 0 0 0c5.12 9.216 8.192 19.456 8.192 31.744 0 33.792-27.648 61.44-61.44 61.44l0 0L245.76 797.696l0 0c-33.792 0-61.44-27.648-61.44-61.44 0-11.264 3.072-22.528 8.192-31.744l0 0 0 0c0 0 0 0 0 0l266.24-449.536 0 0C470.016 237.568 489.472 225.28 512 225.28z"
            fill="#d81e06"
            p-id="14219"
          ></path>
        </svg>
      </span>

      <span>
        1111
        <svg
          t="1650883963718"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="14556"
          width="16"
          height="16"
        >
          <path
            d="M512 798.72c-22.528 0-41.984-12.288-53.248-29.696v0l-266.24-449.536c0 0 0 0 0 0v0 0c-5.12-9.216-8.192-19.456-8.192-31.744 0-33.793 27.648-61.441 61.44-61.44v0h532.48c33.793 0 61.441 27.648 61.44 61.44 0 11.264-3.072 22.528-8.192 31.744v0 0c0 0 0 0 0 0l-266.24 449.536c-11.264 17.408-30.72 29.696-53.248 29.696z"
            fill="#1afa29"
            p-id="14557"
          ></path>
        </svg>
      </span>
    </div>
    <div class="bott">
      <div class="echart" ref="echart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "",
  mounted() {
    let lineChart = echarts.init(this.$refs.echart);
    lineChart.setOption({
      xAxis: {
        show: false,
        type: "category",
      },
      yAxis: {
        show: false,
      },
      series: {
        type: "line",
        data: [3, 6, 5, 7, 4, 9, 6, 4, 2],
        smooth: true, //设置平滑
        //     隐藏拐点
        itemStyle: {
          opacity: 0,
        },
        lineStyle: {
          color: "skyblue",
        },
        areaStyle: {
          // 折线渐变
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "cyan", //0%的颜色
              },
              {
                offset: 1,
                color: "white", //100%的颜色
              },
            ],
            global: false, //缺省为false
          },
        },
      },
      grid: {
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
      },
    });
  },
};
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
}
.header > svg {
  margin-left: 10px;
}
.center {
  margin-top: 20px;
}
.center > span {
  margin-right: 20px;
}
.echart {
  wisth: 100%;
  height: 50px;
}
</style>